<!--
*- coding = utf-8 -*-
#@Time : 2023/6/21 14:51
#@Author : 管茂良
#@File : index.vue
#@web  : www.php-china.com
#@Software: WebStorm
-->
<template>
  <div class="app-container">
    <u-form :model="formConfig.data" ref="formRef">
      <CommonList :title="'头像'" class="commonListStyle" >
        <template #rightSlot>
          <view class="u-f">
            <view class="margin-right-5">
              <u-input v-model="formConfig.data.headImg" placeholder="请选择头像" style="text-align: right" />
            </view>
            <view class="u-f u-f-ac u-f-ajc">
              <SvgIcon :size="'15'" :iconClass="'right'" />
            </view>
          </view>
        </template>
      </CommonList>
      <CommonList :title="'名称'" class="commonListStyle" >
        <template #rightSlot>
          <view class="u-f">
            <view class="margin-right-5">
              <u-form-item prop="nickName" :border-bottom="false">
                <u-input v-model="formConfig.data.nickName" placeholder="请输入名称" style="text-align: right" />
              </u-form-item>

            </view>
            <view class="u-f u-f-ac u-f-ajc">
              <SvgIcon :size="'15'" :iconClass="'right'" />
            </view>
          </view>
        </template>
      </CommonList>
      <CommonList :title="'我的二维码'" class="commonListStyle" >
        <template #rightSlot>
          <view class="u-f">
            <view class="margin-right-5">
              <u-input v-model="formConfig.data.qrCode" placeholder="请选择名称" style="text-align: right" />
            </view>
            <view class="u-f u-f-ac u-f-ajc">
              <SvgIcon :size="'15'" :iconClass="'right'" />
            </view>
          </view>
        </template>
      </CommonList>
      <CommonList :title="'个性签名'" class="commonListStyle" >
        <template #rightSlot>
          <view class="u-f">
            <view class="margin-right-5">
              <u-input v-model="formConfig.data.personalSignature" placeholder="还没想好要写什么..." style="text-align: right" />
            </view>
            <view class="u-f u-f-ac u-f-ajc">
              <SvgIcon :size="'15'" :iconClass="'right'" />
            </view>
          </view>
        </template>
      </CommonList>
      <CommonList :title="'性别'" class="commonListStyle" >
        <template #rightSlot>
          <view class="u-f" @click="handleFormChange('sex')">
            <view class="margin-right-5">
              {{formConfig.data.sex!=''?formConfig.data.sex:'未知'}}
            </view>
            <view class="u-f u-f-ac u-f-ajc">
              <SvgIcon :size="'15'" :iconClass="'right'" />
            </view>
          </view>
        </template>
      </CommonList>
      <CommonList :title="'生日'" class="commonListStyle" >
        <template #rightSlot>
          <view class="u-f">
            <view class="margin-right-5">
              <u-input style="text-align: right;caret-color: transparent" v-model="formConfig.data.birthday" placeholder="出生日期" @focus="isShowPickerTime = !isShowPickerTime"/>
              <u-picker mode="time" v-model="isShowPickerTime" :params="pickTimeParams" @confirm="handleConfirmPick($event,'time')"></u-picker>
            </view>
            <view class="u-f u-f-ac u-f-ajc">
              <SvgIcon :size="'15'" :iconClass="'right'" />
            </view>
          </view>
        </template>
      </CommonList>
      <CommonList :title="'所在地'" class="commonListStyle" >
        <template #rightSlot>
          <view class="u-f">
            <view class="margin-right-5">
              <u-form-item prop="address" :border-bottom="false">
                <u-input style="text-align: right;caret-color: transparent" v-model="formConfig.data.address" placeholder="请选择所在地区" @focus="isShowAddress = !isShowAddress"/>
                <u-picker mode="region" v-model="isShowAddress"  @confirm="handleConfirmPick($event,'region')"></u-picker>
              </u-form-item>
            </view>
            <view class="u-f u-f-ac u-f-ajc">
              <SvgIcon :size="'15'" :iconClass="'right'" />
            </view>
          </view>
        </template>
      </CommonList>
    </u-form>
    <u-button style="margin:20rpx;" type="primary" @click="handleSubmit">提&nbsp;&nbsp;交</u-button>
    <u-action-sheet :list="sheetList" v-model="isShow"  @click="handleClick"></u-action-sheet>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import CommonList from "@/components/commonList/index"
import {onReady} from "@dcloudio/uni-app";

let formInit = {
  headImg: '',
  address: '',
  birthday: '',
  nickName: '',
  personalSignature: '',
  qrCode: '',
  intro: '',
  sex: ''
}
let formConfig = ref({
  data:formInit,
  rules:{
    headImg: [
      {
        required: true,
        message: '请选择图片',
        trigger: ['change','blur'],
      }
    ],
    nickName: [
      {
        required: true,
        message: '请输入姓名',
        trigger: ['change','blur'],
      }
    ],
    sex: [
      {
        required: true,
        message: '请选择性别',
        trigger: ['change','blur'],
      }
    ],
    birthday: [
      {
        required: true,
        message: '请选择生日',
        trigger: ['change','blur'],
      }
    ]
  }
})
let pickTimeParams = ref({
  year: true,
  month: true,
  day: true,
})
let formRef = ref()
let sheetList = ref<any[]>([])
let isShowPickerTime = ref(false)
let isShow = ref(false)
let isShowAddress = ref(false)
let curChoose = ref("")//当前选中选项

const handleClick = (index: any)=>{
  formConfig.value.data[curChoose.value] = sheetList.value[index]["text"]
}

const handleFormChange = (type:string)=>{
  isShow.value = true;
  curChoose.value = type
  if(type=='sex'){
    sheetList.value = [{
      text: '男',
      fontSize: 28
    }, {
      text: '女',
      fontSize: 28
    }, {
      text: '未知',
      fontSize: 28
    }]
  }
}

//提交
const handleSubmit = ()=>{
  formRef.value.validate((valid: any) => {
    if (valid) {
      console.log('验证通过');
    } else {
      console.log('验证失败');
    }
  });
}

const handleConfirmPick= (val:any,type:string)=>{
  if(type=='time'){
    let {year,month,day} = val;
    formConfig.value.data.birthday = year+"-"+month+"-"+day
  }else if(type=='region'){
    let area = val.area.name;
    let city = val.city.name;
    let province = val.province.name;
    formConfig.value.data.address = province+"-"+city+"-"+area
  }
}
onReady(()=>{
  formRef.value.setRules(formConfig.value.rules)
})
</script>

<style scoped lang="less">
.app-container{
  /deep/ .commonListStyle{
    .title{
     line-height:68rpx;
    }
    .u-form-item{
      padding:0rpx;
    }
  }
}

</style>
